<template>
  <div class="flow-setting-preview-wrap">
    <form-preview
      class="form-preview-container"
      v-bind="{ ...formPreviewProps }"
    >
      <!-- 预览表单组件 -->
      <template v-if="showFormPreview">
        <div class="form-preview-box">
          <el-button
            type="primary"
            class="form-preview-btn"
            @click="$emit('onOpenFormDesignDialog')"
          >
            {{ type === 'create' ? $t('event.setting.serviceEventTypeSetting.flow.component.settingFlowPreview.btn1') : $t('event.setting.serviceEventTypeSetting.flow.component.settingFlowPreview.btn2') }}
          </el-button>
        </div>
      </template>

      <!-- iframe 预览 -->
      <template v-else-if="showIFrame">
        <div class="form-preview-box">
          <el-button
            type="primary"
            class="form-preview-btn"
            @click="openSetReviewQuestion"
          >
            {{$t('event.setting.serviceEventTypeSetting.flow.component.settingFlowPreview.btn3')}}
          </el-button>
        </div>
        <div class="main-wrap iframe-wrap" v-loading="loading">
          <iframe
            height="92%"
            width="100%"
            id="satisfactionFrame"
            title="Inline Frame Example"
            :src="iframeUrl"
          >
          </iframe>
        </div>
      </template>

      <!-- 图片预览 -->
      <template v-else>
        <div class="main-wrap">
          <el-image fit="cover" :src="prevImageUrl"></el-image>
        </div>
      </template>
    </form-preview>
  </div>
</template>

<script>
const PREV_IMAGE_URL = '';
const PREV_IMAGE_URL2 = '';
/** api*/
import * as SettingApi from '@src/api/SettingApi.ts';
export default {
  name:'setting-flow-preview',
  inject: ['flowData'],
  props: {
    type: {
      type: String,
      default: 'create',
    },
    evaluationOptions: {
      type: Array,
      default: () => [],
    },
    fields: {
      type: Array,
      default: () => [],
    },
    satisfactionId:{
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: true,
      formPreviewProps: {}, //  表单预览组件时需要传递的参数
      iframeUrl:''
    };
  },
  computed: {
    showFormPreview() {
      return ['create', 'finish'].includes(this.type);
    },
    showIFrame() {
      return ['evaluate'].includes(this.type) && this.satisfactionId;
    },
    prevImageUrl() {
      return this.type === 'allot' ? PREV_IMAGE_URL : PREV_IMAGE_URL2;
    },
  },
  watch: {
    fields: {
      handler(newV) {
        if (newV && newV.length) {
          this.formPreviewProps = {
            fields: this.fields,
          };
        } else {
          this.formPreviewProps = {};
        }
      },
      immediate: true,
      deep: true,
    },
    satisfactionId: {
      immediate: true,
      handler(newValue) {
        if(newValue) {
          this.loading = true;
          this.iframeUrl = `/pcoperation/task/evaluate?id=${ newValue }&isReviewed=0&isEvaluated=0&isShowPhone=true`
          setTimeout(() => {
            this.loading = false
          }, 1000);
        }
      }
    }
  },
  methods: {
    /** 预览满意度方案*/    
    openSetReviewQuestion() {
      this.$emit('openSetReviewQuestion')
    },
  }
};
</script>

<style lang="scss" scoped>
.flow-setting-preview-wrap {
  padding-top: 17px;
  width: 100%;
  height: calc(100% - 40px);
  background: #ffffff;
  border-radius: 0px 0px 4px 4px;
  display: flex;
  justify-content: center;
  .form-preview-container {
    position: relative;
    ::v-deep .form-design-phone {
      height: calc(100% - 130px) !important;
    }
    .main-wrap {
      position: absolute;
      top: 39px;
      left: 15px;
      right: 23px;
      bottom: 22px;
      height: calc(100% - 80px);
      width: calc(100% - 31px);
      border: 1px solid #edf0f4;
      border-top: none;
      background-color: #f2f2f2;
      box-shadow: none;
      overflow-y: hidden;
      & > iframe {
        width: 100%;
        height: 100%;
      }
      & > .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .iframe-wrap {
      height: calc(100% - 130px);
    }
    .form-preview-box {
      position: absolute;
      bottom: 40px;
      left: 16px;
      text-align: center;
      width: calc(100% - 32px);
      height: 50px;
      line-height: 50px;
      background: #ffffff;
      .form-preview-btn {
        width: calc(100% - 20px);
      }
    }
  }
}
</style>
